<!-- 喜欢页面 -->
<script setup lang="ts">
import { getOptListAPI, type ArticleRowItem } from '@/apis/article'
import ArticleItem from '@/components/ArticleItem.vue'
import { ref, onMounted } from 'vue'

// 操作类型常量定义
const OPT_TYPE = {
  LIKE: 1, // 点赞
  COLLECT: 2, // 收藏
}

const list = ref<ArticleRowItem[]>([]) // 喜欢列表数据
const page = ref(1) // 当前页码
const isLoading = ref(false) // 是否加载中
const isFinished = ref(false) // 是否加载完成

/**
 * 获取喜欢列表数据
 * @returns {Promise<void>} 无返回值
 */
const getLikeList = async () => {
  if (isLoading.value) return

  try {
    // 设置加载状态为 true
    isLoading.value = true

    // 调用喜欢列表接口
    const res = await getOptListAPI({
      page: page.value,
      pageSize: 10,
      optType: OPT_TYPE.LIKE,
    })

    if (page.value === 1) {
      // 如果是第一页，赋值保存列表
      list.value = res.data.rows
    } else {
      // 如果不是第一页，追加列表
      list.value.push(...res.data.rows)
    }

    // 判断当前页码是否已超过总页数
    if (page.value >= res.data.pageTotal) {
      // 如果页码大于或等于总页数，设置加载完成为 true
      isFinished.value = true
    }

    // 页码累加
    page.value++
  } catch (error) {
    console.error('获取喜欢列表失败:', error)
  } finally {
    // 请求结束了，设置加载状态为 false
    isLoading.value = false
  }
}

/**
 * 组件挂载时获取喜欢列表
 */
onMounted(() => {
  getLikeList()
})
</script>

<template>
  <div class="like-view">
    <!-- 顶部标题栏 -->
    <van-nav-bar fixed title="我的喜欢" />

    <!-- 喜欢列表 -->
    <van-list
      v-model:loading="isLoading"
      :finished="isFinished"
      finished-text="没有更多了"
      class="article-list"
      @load="getLikeList"
    >
      <!-- 喜欢列表项 -->
      <ArticleItem v-for="item in list" :key="item.id" :article="item" />
    </van-list>

    <!-- 返回顶部按钮 -->
    <van-back-top right="20px" bottom="70px" offset="300" teleport="body" class="custom-back-top" />
  </div>
</template>

<style lang="scss" scoped>
.like-view {
  margin-bottom: 50px;
  margin-top: 44px;
}
</style>
